<template>
<div class="my-card">
  <div class="container">
  <el-table
    :data="tableData"
    style="width: 100%;display:flex;flex-direction:column;">
    <el-table-column
      prop="name"
      label="水厂名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="waterPumpsInfo"
      label="开泵状态"
      width="180">
      <template slot-scope="scope" 
        >
        <div v-for="item in scope.row.waterPumpsInfo" 
          :key="item.id">
        <el-button
        style="margin-right:5px;"
           v-if="item.isOpen"
          :key="item.id"
          type="success"
          circle
          size="small">
          {{item.isOpen}}
        </el-button>
        <el-button
           v-else
          :key="item.id"
          type="danger"
          circle
          size="small">
          {{item.isOpen}}
        </el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="totalFlow"
      label="总供水量（m3/h）">
    </el-table-column>
    <el-table-column
      prop="pressures"
      label="供水压力（MPa）">
      <template slot-scope="scope">
          <span
              v-for="item in scope.row.pressures"
              :key="item"
              size="small">
              {{item}}
          </span>
      </template>
    </el-table-column>
  </el-table>
  <div id="construction" >
    <el-button type="primary" @click="sendOrder">下达指令</el-button>
  </div>
  </div>
</div>
  
</template>
<script>
import axios from 'axios'
import DatePicker from '../../components/DatePicker.vue'
import { getWaterFactoryCurrentData } from '.././model'
// import WorkOrder from '@/pages/system/containers/WorkFlow/StartForm'

export default {
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.getWaterFactoryDetail(); //获取当前水厂数据

  },
  methods: {
    getWaterFactoryDetail() {
      const end = new Date().getTime()
      const start = end - 3600 * 1000 * 24 * 1
      let params = {
        startTime: start,
        endTime: end
      }
      
      getWaterFactoryCurrentData(params).then((res) => {
        console.log('res',res);
        // this.tableData = res.data.data.testData
        // this.tapData = this.tapData.map(item => {
        //   return {...item, show: true}
        // });
      }).catch((err) => {
        console.log(err)
      })
      //mock的数据      
      let mockData = [
        {
          'id': 12345,
          'name': '三坪水厂',
          'totalFlow': 12345,
          'waterPumpsInfo': [
            {
              'id': 12345,
              'isOpen': +true,
            },
            {
              'id': 12346,
              'isOpen': +false
            }],
          'pressures': [0.89, 0.91]
        }
      ];
      this.tableData = mockData;

    },
    sendOrder() {
      //新建工单  ${form.formValues.flowDefineId}
      // window.location.href = `/system/#/startForm?flowId=1`
    },
  },
}
</script>
<style lang="css" scoped>
.my-card{
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
}
  #construction{
    width: 100%;
    margin-top:20px;
  }
    .el-button{
      float: right;
    }

.container{
    width:100%
}
</style>